<template>
  <div class="docmee-container" ref="container"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, defineEmits } from 'vue'
import { DocmeeUI } from '@docmee/sdk-ui'

interface DocmeeMessage {
  type: string
  data: {
    subtype?: 'outline' | 'ppt'
    fields?: any
    file?: {
      name: string
    }
    totalPptCount?: number
    code?: number
    message?: string
    id?: string
    subject?: string
    page?: string
  }
}

const props = defineProps<{
  token: string
  page?: 'dashboard' | 'creator' | 'editor' | 'customTemplate'
  pptId?: string
  mode?: 'light' | 'dark'
  lang?: 'zh' | 'en' | 'jp' | 'de' | 'fr' | 'ko' | 'pt'
}>()

const emit = defineEmits<{
  (e: 'token-expired'): void
}>()

// 页面切场动画
const transitionList = [
  {
    name: "分割",
    config: {
      split: {
        dir: "in",
      },
      spd: "slow",
    },
    key: "split",
  },
  // ... 其他过渡动画配置 ...
]

// 元素动画
const animationList = [
  {
    name: "退场动画",
    children: [
      // ... 退场动画配置 ...
    ]
  },
  {
    name: "路径动画",
    children: [
      // ... 路径动画配置 ...
    ]
  },
  {
    name: "入场动画",
    children: [
      // ... 入场动画配置 ...
    ]
  },
  {
    name: "强调动画",
    children: [
      // ... 强调动画配置 ...
    ]
  }
]

const container = ref<HTMLDivElement | null>(null)
let docmeeUI: any = null

onMounted(() => {
  if (!container.value) return

  // 确保token不为空
  if (!props.token) {
    console.error('DocmeeUI初始化失败: token不能为空')
    return
  }

  console.log('DocmeeUI初始化参数:', {
    token: props.token,
    page: props.page || 'creator',
    pptId: props.pptId,
    mode: props.mode || 'light',
    lang: props.lang || 'zh'
  })

  try {
    // 初始化 Docmee UI
    docmeeUI = new DocmeeUI({
      container: container.value,
      token: props.token,
      page: props.page || 'creator',
      pptId: props.pptId,
      mode: props.mode || 'light',
      lang: props.lang || 'zh',
      isMobile: false,
      padding: '60px 40px 0px',
      background: 'linear-gradient(-157deg, #f57bb0, #867dea)',
      onMessage(message: DocmeeMessage) {
        console.log('Docmee UI 消息:', message)
        
        // 处理各种事件
        switch (message.type) {
          case 'mounted':
            // iFrame 挂载完成事件
            console.log('Docmee UI 已挂载完成')
            break
            
          case 'beforeGenerate':
            // PPT 生成前触发事件
            const { subtype, fields } = message.data
            if (subtype === 'outline') {
              // 生成大纲前触发
              console.log('即将生成PPT大纲，参数：', fields)
              // 这里可以添加自定义逻辑，比如检查用户权限等
              return true // 允许生成大纲
            } else if (subtype === 'ppt') {
              // 生成PPT前触发
              console.log('即将生成PPT，参数：', fields)
              // 这里可以添加自定义逻辑，比如检查用户积分等
              return true // 允许生成PPT
            }
            break
            
          case 'invalid-token':
            console.log('token 认证错误')
            // 触发token过期事件，让父组件处理
            emit('token-expired')
            break
          case 'beforeCreateCustomTemplate':
            const { file, totalPptCount } = message.data
            // 是否允许用户继续制作PPT
            console.log('用户自定义完整模版，PPT文件：', file?.name)
            if (totalPptCount && totalPptCount < 2) {
              console.log('用户积分不足，不允许制作自定义完整模版')
              return false
            }
            return true
          case 'afterGenerate':
            console.log('PPT 生成完成:', message.data)
            break
          case 'error':
            console.error('Docmee错误:', message.data)
            if (message.data.code === 88) {
              // 创建token传了limit参数可以限制使用次数
              alert('您的次数已用完')
            } else {
              alert('发生错误：' + (message.data.message || '未知错误'))
            }
            break
          case 'charge':
            console.log('扣费事件:', message.data)
            break
          case 'user-info':
            console.log('用户信息:', message.data)
            break
          case 'beforeDownload':
            // 自定义下载PPT的文件名称
            const { id, subject } = message.data
            return `PPT_${subject || '未命名'}.pptx`
          case 'manuallySavePPT':
            console.log('手动保存PPT:', message.data)
            break
          case 'toggleGenerateMode':
            console.log('生成方式修改:', message.data)
            break
          case 'pageChange':
            console.log('页面切换:', message.data.page || '未知页面')
            break
        }
      }
    })
  } catch (error) {
    console.error('DocmeeUI初始化失败:', error)
  }
})

onBeforeUnmount(() => {
  if (docmeeUI) {
    docmeeUI.destroy()
  }
})
</script>

<style scoped>
.docmee-container {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 60px 40px 0px;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  background: linear-gradient(-157deg, #f57bb0, #867dea);
  color: white;
}
</style> 